﻿@{
    ViewBag.Title = "菜单管理";
}
@section BeforeScripts{
    <script src="~/content/easyui/expandjs/datagrid-detailview.js"></script>
}
@section Scripts{

    <script type="text/javascript">
        $(function () {

        });
        var columns = [[
            // { title: '全选', field: 'ck', checkbox: true, sortable: false, width: 100 },  //添加checkbox
            { field: 'Id', title: '主键', width: 100 },
            { field: 'MenuName', title: '菜单名称', width: 100 },
            { field: 'MenuCode', title: '菜单编码', width: 100 },
            { field: 'Icon', title: '图标类型', width: 100 },
            {
                field: 'MenuType', title: '菜单类型', width: 100, formatter: function (value, row, index) {
                    if (value == 1) {
                        return "菜单";
                    }
                    else if (value == 2) {
                        return "页面";
                    }
                }
            },
            { field: 'PId', title: '父级Id', width: 100, },
            { field: 'Url', title: '地址', width: 300, },
        ]];
     
        $('#dlg').datagrid({
            url: "/Menu/GetMenus",
            headers: headers,
            // title:"菜单管理",
            columns: columns,
            fit: true, //页面自适应,
            width: 'auto',
            height: 'auto',
            showFooter: true,
            striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
            cache: false,
            rownumbers: true,//设置为 true，则显示带有行号的列
            singleSelect: true,// 设置为 true，则只允许选中一行。
            checkOnSelect: true, //如果设置为 true，当用户点击某一行时，则会选中/ 取消选中复选框checkbox
            loadMsg: "正在加载数据中...",
            pagination: true,//分页控件
            modal: true,
            pageSize: 5,
            pageList: [5, 10, 20],
            toolbar: '#tb',
            view: detailview,
            detailFormatter: function (index, row) {
                return '<div style="padding:2px"><table class="ddv"></table></div>';
            },
            //展开一行时触发。
            onExpandRow: function (index, row) {
                var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
                ddv.datagrid({
                    url: '/Menu/ChildMenus',
                    queryParams: { MenuId: row.Id },
                    headers: headers,
                    //fit: true, //页面自适应,
                    fitColumns: true,
                    singleSelect: true,
                    rownumbers: true,
                    loadMsg: '',
                    height: 'auto',
                    columns: columns,
                    onResize: function () {
                        $('#dg').datagrid('fixDetailRowHeight', index);
                    },
                    onLoadSuccess: function () {
                        setTimeout(function () {
                            $('#dg').datagrid('fixDetailRowHeight', index);
                        }, 0);
                    },
                    onDblClickCell: function (index, field, value) {
                        console.log("ID" + row.Id + "index:" + index + "field:" + field + "value:" + value);
                        ddv.datagrid('beginEdit', index);
                        var ed = ddv.datagrid('getEditor', { index: index, field: field });
                        // $(ed.target).focus();
                    }
                });
                $('#dg').datagrid('fixDetailRowHeight', index);
            },
            onDblClickCell: function (index, field, value) {
                console.log("index:" + index + "field:" + field + "value:" + value);
                // $('#dlg').editRow(index);
                //$('#dlg').datagrid('editRow', index);
                $('#dlg').datagrid('beginEdit', index);
            },
            onDblClickRow: function (index, row) {
                console.log("点击行事件" + "index:" + index + "row:" + row.MenuName);
                $('#dlg').datagrid('beginEdit', index);
            }
        });



        //当分页时运行
        var pager = $("#dlg").datagrid("getPager");
        pager.pagination({
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '第{from}到{to}条，共{total}条',
        });
    </script>
}

<table id="dlg"></table>

<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
    </div>
    <div>
        Date From: <input class="easyui-datebox" style="width:80px">
        To: <input class="easyui-datebox" style="width:80px">
        Language:
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="java">Java</option>
            <option value="c">C</option>
            <option value="basic">Basic</option>
            <option value="perl">Perl</option>
            <option value="python">Python</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
    </div>
</div>



